<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
.nav{
    width: 50%;
    height: auto;
    border: 1px solid red;
    display: -webkit-flex;
}
span{
    display: inline-block;
}
.div1{
    width: 30px;
    flex: 1;
    border: 1px solid brown;
}
.div2{
     flex: 6;
     border: 2px solid skyblue;
 }
    .center{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
    .oCenter{
        width: 140px;
        height: 30px;
        border: 1px solid blue;
        justify-content: center;//水平垂直居中
        align-items: center;
        display: flex;

        /*溢出文本的截取*/
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;/*从第几行截取*/
    }
.line{
    margin-top: 50px;
    border-bottom: 1px solid red;
    transform: scaleY(.5);
}
.line1{
    margin-top: 50px;
    border-bottom: 1px solid red;
}

</style>
<body>

    <div class="nav">
        <span class="div1">span1</span>
        <span class="div2">span2</span>
    </div>

    <div class="center">
        <div class="oCenter">sdadsdsadasd</div>
    </div>

    <div class="line"></div>
    <div class="line1"></div>
</body>
</html>